<template>
  <el-card class="card">
    <el-form ref="form" :model="spu" :rules="rules" label-width="80px">
      <el-form-item label="SPU名称" prop="spuName">
        <el-input placeholder="请输入SPU名称" v-model="spu.spuName" />
      </el-form-item>
      <el-form-item label="SPU品牌" prop="tmId">
        <el-select placeholder="请选择品牌" v-model="spu.tmId">
          <el-option
            v-for="tm in trademarkList"
            :key="tm.id"
            :label="tm.tmName"
            :value="tm.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="SPU描述" prop="description">
        <el-input
          type="textarea"
          placeholder="请输入SPU描述"
          v-model="spu.description"
        />
      </el-form-item>
      <el-form-item label="SPU图片" prop="spuImageList">
        <!--
          on-preview 点击预览触发事件
          on-remove  点击删除触发的事件
         -->
        <el-upload
          action="http://39.98.123.211/admin/product/fileUpload"
          list-type="picture-card"
          :file-list="formatSpuImageList"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :class="{ 'spu-upload': spu.spuImageList.length >= maxImgLength }"
        >
          <i
            class="el-icon-plus"
            v-if="spu.spuImageList.length < maxImgLength"
          ></i>
          <div class="el-upload__tip" slot="tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
      <el-form-item label="销售属性" prop="spuSaleAttrList">
        <el-select placeholder="请选择销售属性" v-model="spu.saleAttr">
          <el-option label="aaa" value="1" />
          <el-option label="bbb" value="2" />
          <el-option label="ccc" value="3" />
        </el-select>
        <el-button type="primary" icon="el-icon-plus">添加属性值</el-button>

        <el-table :data="spu.spuSaleAttrList" border class="table">
          <el-table-column
            label="序号"
            type="index"
            width="50"
            align="center"
          />
          <el-table-column label="属性名" />
          <el-table-column label="属性值列表" />
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-tooltip effect="dark" content="删除" placement="top">
                <el-button type="danger" icon="el-icon-delete" size="mini" />
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">确定</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { reqGetAllTrademarkList } from '@api/trademark'

export default {
  name: 'AddOrUpdateSpu',
  async mounted() {
    const { data } = await reqGetAllTrademarkList()
    this.trademarkList = data.map((tm) => ({
      id: tm.id,
      tmName: tm.tmName
    }))
  },
  data() {
    return {
      spu: {
        spuName: '',
        tmId: '',
        description: '',
        spuImageList: [],
        spuSaleAttrList: [],
        saleAttr: ''
      },
      rules: {
        spuName: [{ required: true, message: '请输入SPU名称' }],
        tmId: [{ required: true, message: '请选择SPU品牌' }],
        description: [{ required: true, message: '请输入SPU描述' }],
        spuImageList: [{ required: true, message: '请上传SPU图片' }],
        spuSaleAttrList: [{ required: true, message: '请选择SPU销售属性' }]
      },
      dialogImageUrl: '', // 预览图片地址
      dialogVisible: false, // 对话框显示&隐藏的标识
      trademarkList: [],
      maxImgLength: 10
    }
  },
  methods: {
    handleRemove(file, fileList) {
      // console.log(file, fileList)
      this.spu.spuImageList = fileList.map((file) => {
        return {
          imgName: file.name,
          imgUrl: file.url,
          uid: file.uid
        }
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 图片上传成功
    handleAvatarSuccess(res, file) {
      if (this.spu.spuImageList.length >= this.maxImgLength) {
        this.$message({
          type: 'error',
          message: `上传图片最多${this.maxImgLength}张!`
        })
        return
      }

      this.spu.spuImageList.push({
        imgName: file.name,
        imgUrl: res.data,
        uid: file.uid // 避免更新时图片闪屏
      })
    },
    // 上传之前
    beforeAvatarUpload(file) {
      const isValidImage =
        file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt = file.size <= 500 * 1024

      if (!isValidImage) {
        this.$message({
          type: 'error',
          message: '上传头像图片只能是 JPG 或 PNG 格式!'
        })
      }
      if (!isLt) {
        this.$message.error('上传头像图片大小不能超过 500KB!')
      }
      // 返回值true 就会继续上传图片
      // 返回值false，就会终止上传
      return isValidImage && isLt
    }
  },
  computed: {
    formatSpuImageList() {
      return this.spu.spuImageList.map((file) => {
        return {
          name: file.imgName,
          url: file.imgUrl,
          uid: file.uid
        }
      })
    }
  }
}
</script>

<style lang="sass" scoped>
</style>
